<template>
  <div id="menuConfigCustomeruration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <span>报考推荐</span>
        </div>
      </template>
      <div style="display: flex; justify-content: space-between">
        <el-button type="primary" @click="addhandleClick">新增</el-button>
      </div>
      <el-row style="margin-top: 20px">
        <el-col :span="6">
          <el-select
            clearable
            v-model="tableConfig.storeId"
            class="m-2"
            placeholder="请选择机构名称"
            size="large"
            style="width: 240px"
            @change="changeFilter"
          >
            <el-option
              v-for="item in filterPlatformList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input
            size="large"
            style="width: 240px"
            v-model="tableConfig.search"
            placeholder="请输入名字或电话号码"
            clearable
            @change="changeFilter"
          >
            <template #append>
              <el-button type="primary" @click="changeFilter">搜索</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="margin-top: 20px; width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column label="机构名称">
          <template #default="scope">
            {{ computedName(scope.row.storeId) }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="名字" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column label="分数">
          <template #default="scope">
            {{ scope.row.modify == 1 ? '开启' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="省份">
          <template #default="scope">
            {{ scope.row.province == 1 ? '开启' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-icon
                size="20"
                style="cursor: pointer"
                @click="handleEdit(scope.row)"
                ><EditPen
              /></el-icon>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-icon
                @click="handleDelete(scope.row)"
                size="20"
                style="cursor: pointer; margin-left: 10px"
                ><Delete
              /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagintion" style="margin-top: 20px">
        <el-pagination
          v-model:current-page="tableConfig.page"
          v-model:page-size="tableConfig.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableConfig.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Dialog
      :title="title"
      :append-to-body="true"
      v-model:dialogFormVisible="visiteDialog"
      @handleClick="handleClick"
      @handleClose="handleClose"
    >
      <template #center>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="params"
          :rules="rules"
          class="demo-ruleForm"
          status-icon
          label-position="right"
        >
          <el-form-item label="名字" prop="name" label-width="80">
            <el-input v-model="params.name" placeholder="请输入名字" />
          </el-form-item>
          <el-form-item label="电话" prop="phone" label-width="80">
            <el-input v-model="params.phone" placeholder="请输入电话号码" />
          </el-form-item>
          <el-form-item
            label="是否允许修改分数"
            prop="modify"
            label-width="140"
          >
            <el-select
              clearable
              v-model="params.modify"
              class="m-2"
              placeholder="请选择"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否允许修改省份"
            prop="province"
            label-width="140"
          >
            <el-select
              clearable
              v-model="params.province"
              class="m-2"
              placeholder="请选择"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="机构名称" prop="storeId" label-width="140">
            <el-select
              clearable
              v-model="params.storeId"
              class="m-2"
              placeholder="请选择机构名称"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in filterPlatformList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';
import recommendations from '@/modules';
import { getCustomerList } from '@/api/appv2/appv2';
const { tuijianConfigListApi, tuijianConfigSaveApi, deltuijianApi } =
  recommendations;
import Dialog from './module/dialog.vue';
const visiteDialog = ref(false);
const ruleFormRef = ref(null);
const filterPlatformList = ref([]);
const list = ref([
  { id: 0, name: '关闭' },
  { id: 1, name: '开启' },
]);
const title = ref('新增');
const params = ref({
  id: 0,
  province: '',
  modify: '',
  phone: '',
  storeId: '',
  name: '',
});
const tableConfig = ref({
  page: 1,
  pageSize: 10,
  search: '',
  total: 0,
  storeId: '',
});
const tableData = ref([]);
const rules = reactive({
  name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  modify: [{ required: true, message: '请选择', trigger: 'blur' }],
  province: [{ required: true, message: '请选择', trigger: 'blur' }],
  storeId: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    {
      pattern: /^\d{11}$/,
      message: '请输入正确的11位手机号码',
      trigger: 'blur',
    },
    {
      validator: (rule, value, callback) => {
        if (!/^\d+$/.test(value)) {
          callback(new Error('请输入数字'));
        } else if (value.length !== 11) {
          callback(new Error('请输入正确的11位手机号码'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});
const addhandleClick = () => {
  Object.assign(params.value, {
    province: '',
    modify: '',
    phone: '',
    name: '',
    id: '',
  });
  visiteDialog.value = true;
};
const tuijianConfigSave = async (parmas) => {
  const data = await tuijianConfigSaveApi(parmas);
  if (data.code == 20000) {
    ElMessage({
      message: data.msg,
      type: 'success',
    });
    visiteDialog.value = false;
    getTableData();
  }
};
const handleClick = async () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      tuijianConfigSave(params.value);
      console.log('提交成功:');
    } else {
      console.error('表单验证失败');
    }
  });
};

const handleClose = () => {
  visiteDialog.value = false;
  ruleFormRef.value.clearValidate();
};
// 获取列表数据
const getTableData = async () => {
  const { page, pageSize, search, storeId } = tableConfig.value;
  const { data } = await tuijianConfigListApi({
    page,
    pageSize,
    search,
    storeId,
  });
  tableData.value = data.data;
  tableConfig.value.total = data.total;
};
// 编辑
const handleEdit = (val) => {
  title.value = '编辑';
  visiteDialog.value = true;
  tableConfig.value.id = val.id;
  Object.assign(params.value, val);
};
const handleDelete = async (val) => {
  const data = await deltuijianApi({ id: val.id });
  if (data.code == 20000) {
    ElMessage({
      message: data.msg,
      type: 'success',
    });
    getTableData();
  }
};
const handleSizeChange = (val) => {
  tableConfig.value.pageSize = val;
  getTableData();
};
const handleCurrentChange = (val) => {
  tableConfig.value.page = val;
  getTableData();
};
const changeFilter = () => {
  tableConfig.value.page = 1;
  getTableData();
};
// 获取菜单列表
function getCustomer() {
  getCustomerList({ page: 1, pageSize: 1000 }).then((res) => {
    filterPlatformList.value = filterPlatformList.value.concat(res.data.data);
  });
}
const computedName = (val) => {
  const data = filterPlatformList.value.filter((item) => item.id == val);
  return data[0]?.name;
};
onMounted(() => {
  getTableData();
  getCustomer();
});
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
